<%@ page import="java.util.Date" %>
<%@page contentType="text/html;charset=utf-8" pageEncoding="utf-8" %>
<jsp:include page="head.jsp"></jsp:include>
<%
    response.setHeader("Pragma", "No-cache");
    response.setDateHeader("Expires", 0);
    response.setHeader("Cache-Control", "no-cache");
    response.flushBuffer();
%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>控制台</title>
		<link rel="stylesheet" type="text/css" href="../../statics/css/identify.css" />
		<link rel="stylesheet" type="text/css" href="../../statics/css/layout.css" />
		<link rel="stylesheet" type="text/css" href="../../statics/css/style.css" />
		<link rel="stylesheet" type="text/css" href="../../statics/css/control_index.css" />
		<script type="text/javascript" src="../../statics/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="../../statics/js/haidao.offcial.general.js"></script>
		<script type="text/javascript" src="../../statics/js/select.js"></script>
		<script type="text/javascript" src="../../statics/js/haidao.validate.js"></script>
	</head>
	<style>
		a{
			color:#666; font-size:14px;
		}

	</style>

	<body>
        <div class="view-body">

			<div class="view-product">
				<div class="authority">
					<div class="authority-head">
						<div class="manage-head">
							<h6 class="layout padding-left manage-head-con">车位信息查询</h6>
						</div>
					</div>

					<div class="authority-content">

						<div class="list-content show">
							<div class="offcial-table tr-border margin-big-top clearfix" >
								<div class="unit-style padding-big-lr clearfix">
									<form id="cxform">
										<div class="real-name-con margin-top-25 clearfix">
											<p class="content-left-zoon margin-top-15">
												是否已分配
											</p>
											<div class="content-right-zoon margin-top-15">
												<label class="no-time"><span class="fl">
													<input class="licence-class" type="radio" id = 'all' name="sffp" checked="checked" data-hide="normal_licence" data-show="various_licence" value="2">
													</span><em class="fl">全部</em>
												</label>
												<label class="no-time"><span class="fl">
													<input class="licence-class1 margin-large-left" id = 'yesfp'type="radio" name="sffp" data-hide="various_licence" data-show="normal_licence" value="1">
													</span><em class="fl">已分配</em>
												</label>
												<label class="no-time"><span class="fl">
													<input class="licence-class1 margin-large-left" id = 'nofp' type="radio" name="sffp" data-hide="various_licence" data-show="normal_licence" value="0">
													</span><em class="fl">未分配</em>
												</label>
											</div>
										</div>
										<div class="real-name-con height-main margin-top-25 clearfix">
											<p class="content-left-zoon">
												车牌号码：
											</p>
											<div class="content-right-zoon">
												<input  class="width-main input" id="car_plate" type="text" datatype="*" name="car_plate" value="">
											</div>
										</div>
									<div class="real-name-con height-main margin-top-25">
										<p class="content-left-zoon">
											车位区域：
										</p>
										<div class="content-right-zoon">
										<%--	<input class="width-main input" type="text" name="park_area" datatype="*" value="">--%>
											<select class="width-main input" name="park_area" id="park_area_select" >
												<option value="">请选择</option>
											</select>

										</div>
									</div>
									<div class="real-name-con margin-top-25">
										<p class="content-left-zoon ">
											区域号码：
										</p>
										<div class="content-right-zoon">
											<input class="width-main input" type="text" name="park_number" datatype="*" value="">
										</div>
									</div>

										<%--隐藏域--%>
										<input  type="hidden" id="pageCurrent" name="pageCurrent" datatype="*" value="">



									</form>
									<div class="real-name-con margin-top-25">
										<div class="margin-large-top padding-left text-left content-right-zoon">
											<input type="button" value="查 询" class="submit fl" id = "find" style="margin-left: 80px">
										</div>
									</div>

								</div>

								<div class="tr-th clearfix" style="margin-top: 25px" >
									<div class="th w10"  style="font-size: 13px">
										序号
									</div>
									<div class="th w15"  style="font-size: 13px">
										车位区域
									</div>
									<div class="th w10"  style="font-size: 13px" >
										车位号码
									</div>
									<div class="th w10"  style="font-size: 13px">
										车牌号码
									</div>
									<div class="th w10"  style="font-size: 13px">
										车主姓名
									</div>
									<div class="th w15"  style="font-size: 13px">
										车主联系方式
									</div>
									<div class="th w15"  style="font-size: 13px">
										车位是否已分配
									</div>
									<div class="th w15"  style="font-size: 13px">
										操 作
									</div>
								</div>


								<div  class="tr clearfix border-bottom-none" id ='parkplace_list' >
										<%--此处追加数据--%>
								</div>

							</div>
						</div>
						<div class="show-page padding-big-right">
							<div class="page">
								<div class="page">
									<ul class="offcial-page margin-top margin-big-right">
										<span id="pageId">
									<a class="first" style="cursor:pointer;">首页</a>
									<a class="pre" style="cursor:pointer;">上一页</a> 
											<a class="mynext" style="cursor:pointer;">下一页</a>
											<a class="mylast" style="cursor:pointer;">尾页</a>
		                            <a class="pageCount" style="cursor:pointer;">总页数(1)</a>
		                            <a class="pageCurrent"  style="cursor:pointer;">当前页(1)</a>
										</span>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script>
            //选择未分配时 清空车牌号
            $(function(){
                $("#nofp").click(function(){
                   $("#car_plate").val("");
                   $("#car_plate").attr("disabled",'true');
                });
                $("#yesfp").click(function(){
                    $("#car_plate").val("");
                    $("#car_plate").removeAttr("disabled");
                });
                $("#all").click(function(){
                    $("#car_plate").val("");
                    $("#car_plate").removeAttr("disabled");
                });
                queryparkarea();

            });
            //查询数据
            $("#find").click(function () {
                $('#pageCurrent').val(1);
                doGetObjects();
            });
            $(".mynext").click(function () {
                jumpToPage($(this).attr("class"));
            });
            $(".pre").click(function () {
                jumpToPage($(this).attr("class"));
            });
            $(".first").click(function () {
                jumpToPage($(this).attr("class"));
            });
            $(".mylast").click(function () {
                jumpToPage($(this).attr("class"));
            });


            function doGetObjects() {

                //1.定义访问项目信息的url
                var url = "http://localhost:8888/ParkManage/getParkPlaceMessage"+"?timestamp=" + new Date().getTime();
                //2.获取表单数据(查询时用)
                var params = $('#cxform').serialize();
                //3.动态设置分页页码数据
                var pageCurrent = $('#pageId').data("pageCurrent");
               // if (!pageCurrent) pageCurrent = 1;
               // params.pageCurrent = pageCurrent;


                //4.发起异步ajax请求{name:"",valid:"",pageCurrent:1}
                $.get(url, params, function (data) {//result-->JsonResult-->{}
                    console.log(data);
                    var num = data.serverResponse.data.length;

                    if (data.serverResponse.status == 1 && num!=0) {
                        var htmladd="";

                        //设置当前页数据
                        $("#parkplace_list").empty();
                        for (var x = 0; x < num; x++) {
                            htmladd += '<div class="tr clearfix border-bottom-none" id="valbox">';
                            htmladd += '<div class="td w10"  style="font-size: 15px;color:black;"> ' + (x + 1) + '</div>';
                            htmladd += '<div class="td w15"  style="font-size: 15px;color:black;"> ' + data.serverResponse.data[x].park_area + '</div>';
                            htmladd += '<div class="td w10"  style="font-size: 15px;color:black;"> ' + data.serverResponse.data[x].park_number + '</div>';
                            if(data.serverResponse.data[x].sffp == '已分配'){
                                htmladd += '<div class="td w10"  style="font-size: 15px;color:black;"> ' + data.serverResponse.data[x].car_plate + '</div>';
							}else{
                                htmladd += '<div class="td w10"  style="font-size: 15px;"> ' + '<input style="width:130px;height:35px;font-size: 14px" class="width-main input"  id="plate_'+data.serverResponse.data[x].park_id+'" value=""/>' + '</div>';
                            }
                            htmladd += '<div class="td w10"  style="font-size: 15px;color:black;"> ' + data.serverResponse.data[x].owner_name + '</div>';
                            htmladd += '<div class="td w15"  style="font-size: 15px;color:black;"> ' + data.serverResponse.data[x].owner_phone + '</div>'
                            htmladd += '<div class="td w15"  style="font-size: 15px;color:black;"> ' + data.serverResponse.data[x].sffp + '</div>';
                            if(data.serverResponse.data[x].sffp == '已分配'){
                                htmladd += '<div class="td w15" onclick="deleteParkPlace('+data.serverResponse.data[x].park_id+')" style="font-size: 15px;color:red;cursor:pointer;"> ' + '清空车位' + '</div>';
							}else{
                                htmladd += '<div class="td w15" onclick="FPParkPlace('+data.serverResponse.data[x].park_id+')" style="font-size: 15px;color:green;cursor:pointer;"> ' + '分配' + '</div>';
                               /* htmladd += '<div class="td w10"  style="font-size: 15px"> ' + '<input style="width:100px;height:35px;font-size: 14px" class="width-main input"  id="plate_'+data.serverResponse.data[x].park_id+'" value=""/>' + '</div>';*/
                            }

                            htmladd += ' </div>';
                        }
                        $("#parkplace_list").append(htmladd);

                        //设置分页信息(setPagination方法在page.js中)
                        //console.log(result.pageObject);//undefined
                        setPagination(data.pageObject);
                    } else if(num==0){
                        $("#parkplace_list").empty();
                        alert("暂无数据!");
                        return;
                    }
                });
            }
			/*装载车位区域信息*/
			function queryparkarea() {
                $.ajax({
                    type: "GET",
                    url: "http://localhost:8888/ParkManage/QueryAllParkArea"+"?timestamp=" + new Date().getTime(),
                    dataType: "json",
                    success: function(data){
						var size = data.parkareas.length;
						for(var i = 0;i<size;i++){
                            $("#park_area_select").append("<option value='"+data.parkareas[i].park_area+"'>"+data.parkareas[i].park_area +"</option>");
						}
                    }
                });
              }

			/*分页开始*/


            //设置分页
            function setPagination(pageObject){
                //1.初始化总页数
                $(".pageCount").html("总页数("+pageObject.pageCount+")");
                //2.初始化当前页的页码
                $(".pageCurrent").html("当前页("+pageObject.pageCurrent+")");
                //3.在pageId对应的对象上绑定总页数
                //data函数用于以key/value的方式在对象上绑定数据
                $("#pageId").data("pageCount",
                    pageObject.pageCount);
                //4.在pageId对象的对象上绑定当前页面值
                $("#pageId").data("pageCurrent",pageObject.pageCurrent);
              //  alert(pageObject.pageCurrent);
            }


            //定义一个函数,通过此函数实现页面的跳转
            function jumpToPage(clazz){

                //获得点击对象上class属性对应的值,根据此值
                //判定具体点击的是哪个对象(例如上一页,下一页)
                //获得pageId对象上绑定的pageCurrent对应的值
                var pageCurrent=$('#pageId').data("pageCurrent");
                //获得pageId对象上绑定的pageCount对应的值
                var pageCount=$('#pageId').data("pageCount")
                //根据class属性的值判断点击的是否是上一页
                if(clazz=='pre'&&pageCurrent>1){
                    pageCurrent--;
                }
                //判断点击的是否是下一页
                if(clazz=="mynext"&&pageCurrent<pageCount){
                    pageCurrent++;
                }
                //判断点击的对象是否是首页
                if(clazz=="first"){
                    pageCurrent=1;
                }
                //判定点击的对象是否是尾页
                if(clazz=="mylast"){
                    pageCurrent=pageCount;
                }
                //重写绑定pageCurrent的值,
                $('#pageCurrent').val(pageCurrent);
                //重新执行查询操作(根据pageCurrent的值)
                doGetObjects();
            }

         /*分页结束*/

         function deleteParkPlace(id){
             var url = "http://localhost:8888/ParkManage/deleteParkPlace?car_parkplace_id="+id+"&timestamp=" + new Date().getTime();
             $.get(url, function (data) {
                 if(data.success == true){
                     alert("该车位上的车辆已移除！")
                     doGetObjects();
                 }else {
                     alert("系统错误！！")
                     doGetObjects();
                 }
             });
            /*  alert("删除"+id)*/
         }
         function FPParkPlace(id) {
                 $.ajax({
                     type: "POST",
                     url: "http://localhost:8888/ParkManage/FPParkPlace",
                     data: {car_plate:$("#plate_"+id).val(), car_parkplace_id:id},
                     dataType: "json",
                     success: function(data){
                         if(data.success == true){
                             alert("分配成功！");
                             doGetObjects();
						 }else if(data.empty == 1){
                             alert("请填写车牌号码！");
						 }else{
                             alert("该车牌号码不存在，请先录入该车辆！");
						 }
                     }
                 });
         }
		</script>
	</body>

</html>